<template>
  <div>
    <div class="order_big">
      <span>订单筛选:</span>
      <select v-model="selected" class="order">
        <option value="All">全部订单</option>
        <option value="gongsi">公司订单</option>
        <option value="zitian">自添订单</option>
        <option value="shanchu">已删除订单</option>
        <option value="newren">新人订单</option>
      </select>

      <select v-model="riqi" class="order">
        <option value="All">所有日期</option>

        <option value="2019">2019</option>
        <option value="2020">2020</option>
        <option value="2021">2021</option>
      </select>
      <div class="order_select">
        <p class="p1">
          当前共查询到
          <span>XX</span> 条订单,总订单额度
          <span>xxx</span>元
        </p>
        <p class="p2" @click="abledClick">
          <span>添加订单</span>
        </p>
      </div>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="典礼时间" align="center"></el-table-column>
      <el-table-column prop="gongsi" label="下单公司" align="center"></el-table-column>
      <el-table-column prop="name" label="联系人电话" align="center"></el-table-column>
      <el-table-column prop="address" label="酒店名称" align="center"></el-table-column>
      <el-table-column prop="times" label="下单时间" align="center"></el-table-column>
      <el-table-column prop="jinE" label="金额" align="center"></el-table-column>
      <el-table-column prop="dinType" label="订单类型" align="center"></el-table-column>
      <el-table-column prop="beizhu" label="备注" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <el-button type="text" size="small" @click="removeorder">删除</el-button>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block fenye">
      <el-pagination layout="prev, pager, next" :total="50" :page-size="parseInt(value)"></el-pagination>
      <div class="prev_pager">
        <span>每页显示</span>
        <select v-model="value" @change="huoqu(value)">
          <option value="25">25</option>
          <option value="50">50</option>
          <option value="100">100</option>
        </select>
        <span>条</span>
      </div>
    </div>
    <!-- //添加订单的弹框 -->
    <el-dialog
      title="添加订单"
      :visible.sync="dialogVisibleOrder"
      width="50%"
      :before-close="handleClose"
      style="textAlign:center"
    >
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="典礼日期：">
          <el-input v-model="form.riqi"></el-input>
        </el-form-item>
        <el-form-item label="典礼时间：">
          <el-input v-model="form.times"></el-input>
        </el-form-item>
        <el-form-item label="婚礼公司：">
          <el-input v-model="form.gongsi"></el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model="form.lianxi"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：">
          <el-input v-model="form.phones"></el-input>
        </el-form-item>
        <el-form-item label="酒店名称：">
          <el-input v-model="form.jiuname"></el-input>
        </el-form-item>
        <el-form-item label="酒店地址">
          <select v-model="form.dizhi">
            <option value="beijin">北京</option>
            <option value="waidi">外地+1000</option>
          </select>
        </el-form-item>
        <el-form-item label="酒店名称：">
          <el-button type="info">{{form.dizhi=='waidi'?jiage+1000:jiage}}</el-button>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
      </el-form>

      <el-button type="primary" @click="dialogVisibleOrder = false">返 回</el-button>
      <el-button type="primary" @click="tijiaodingdan">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  name: "Order",
  data() {
    return {
      selected: "",
      riqi: "",
      value: 25,
      dialogVisibleOrder: false,
      form: {},
      jiage: 2000,
      tableData: [
        {
          date: "2016-05-02",
          name: `王小虎 
            12345678910`,
          gongsi: "北京XXXX婚礼策划",
          address: "北京XXXX婚礼策划",
          times: "2020年05月18日 13:20",
          jinE: "15180",
          dinType: "已删除",
          beizhu: ""
        }
      ]
    };
  },
  mounted() {
    // 尽心一个网络请求吧表单的数据展示出来连接分页
    // 请求成功以后展示数据并且连接分页
  },
  methods: {
    //分页的change事件
    huoqu(e) {
      // this.reload()
    },  
    abledClick() {
      this.dialogVisibleOrder = true;
    },
    //弹框的取消
    handleClose() {
      this.dialogVisibleOrder = false;
    },
    //提交订单确定按钮
    tijiaodingdan() {
      //网络请求
      if (true) {
        //添加数据库成功后
        this.dialogVisibleOrder = false;
        //  更新页面
        this.reload();
      }
    },
    //删除数据的按钮事件
    removeorder() {
      // 网络请求删除数据库的数据
      if (true) {
        // 删除成功以后

        // 更新页面
        this.reload();
      }
    }
  }
};
</script>

<style lang="less" scoped>
.order_big {
  font-size: 16px;
  color: #000;
  margin-top: 10px;
}
.order {
  width: 150px;
  height: 25px;
  margin-left: 20px;
}
.order_select {
  display: flex;
  .p1 {
    font-size: 16px;
    flex: 10;
  }
  .p2 {
    font-size: 16px;
    flex: 1;
    cursor: pointer;
  }

  span {
    color: #cc0000;
  }
}
.fenye {
  text-align: center;
  position: relative;
}
.prev_pager {
  position: absolute;
  left: 900px;
  top: 10px;
  z-index: 999;
  font-size: 14px;
}
</style>